<template>
  <div>
    <el-form ref="tuaneditform" :model="tuanData" label-width="150px">
      <el-form-item label="头像">
        <l-pic :picurl="tuanData.avatar" :size="{width:40,height:40}" :disdel="false" :disview="false"/>
        <!-- <el-input v-model="vipData.name" placeholder="会员等级名称" size="small" style="max-width:70%"></el-input> -->
      </el-form-item>
      <el-form-item label="昵称">
        <div>{{ tuanData.nickname }}</div>
      </el-form-item>
      <el-form-item label="性别">
        <div>{{ tuanData.sex }}</div>
      </el-form-item>
      <el-form-item label="手机号码">
        <div>{{ tuanData.phone }}</div>
      </el-form-item>
      <el-form-item label="真实姓名">
        <el-input v-model="tuanData.realname" placeholder="真实姓名" size="small" style="max-width:70%"></el-input>
      </el-form-item>
      <el-form-item label="团员数量">
        <div>未设置</div>
      </el-form-item>
      <el-form-item label="上级团长">
        <div>无（未设置）</div>
      </el-form-item>
      <el-form-item label="自提点地区">
        <el-cascader :options="options" v-model="selectedOptions" @change="handleChange" style="width:250px" placeholder="请选择省市区"></el-cascader>
      </el-form-item>
      <el-form-item label="自提点小区">
        <el-input v-model="tuanData.area_name" placeholder="自提点小区" size="small" style="max-width:70%"></el-input>
      </el-form-item>
      <el-form-item label="自提点地址">
        <el-input v-model="tuanData.addr" placeholder="自提点小区" size="small" style="max-width:70%"></el-input>
      </el-form-item>
      <el-form-item label="自提点坐标">
        <el-input v-model="tuanData.longitude" placeholder="自提点坐标" size="small" style="max-width:35%"></el-input>
        <el-input v-model="tuanData.latitude" placeholder="自提点坐标" size="small" style="max-width:35%"></el-input>
      </el-form-item>
      <el-form-item label="地图定位">
        <baidu-map
                style="width:70%;height:200px"
                ak="6GsLWO6HaqjRb3BuCjqCHIP1tMEuMkWK"
                :zoom="zoom"
                :center="mapCenter"
                @click="getLocationPoint"
                >
        </baidu-map>
      </el-form-item>
      <el-form-item label="注册时间">
        <div>{{ tuanData.format_create_time }}</div>
      </el-form-item>
      <el-form-item label="积分">
        <div>未设置</div>
      </el-form-item>
      <el-form-item label="销售额">
        <div>未设置</div>
      </el-form-item>
      <el-form-item label="送货上门">
        <el-switch v-model="tuanData.is_tuan_express" active-color="#13ce66" active-value="1" inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="配送费">
        <el-input v-model="tuanData.tuan_express_fee" placeholder="配送费" size="small" style="max-width:70%"></el-input>
      </el-form-item>
      <el-form-item label="支付宝">
        <el-input placeholder="支付宝" size="small" style="max-width:70%"></el-input>
      </el-form-item>
      <el-form-item label="银行卡所在行">
        <el-input placeholder="银行卡所在行" size="small" style="max-width:70%"></el-input>
      </el-form-item>
      <el-form-item label="持卡人姓名">
        <el-input placeholder="持卡人姓名" size="small" style="max-width:70%"></el-input>
      </el-form-item>
      <el-form-item label="卡号">
        <el-input placeholder="卡号" size="small" style="max-width:70%"></el-input>
      </el-form-item>
    </el-form>

    <!-- 提交 -->
    <div style="text-align:center;margin-top:25px">
      <el-button type="primary" style="padding:8px 20px" @click="submit">保 存</el-button>
    </div>
  </div>
</template>

<script>
import { getTuanUser, putTuanUser } from '@/api/customers'
import LPic from '@/components/lPic'
import { regionData, CodeToText } from 'element-china-area-data'
import BaiduMap from 'vue-baidu-map/components/map/Map'

export default {
  name:'headedit',
  components: {
    LPic,
    BaiduMap,
  },
  props: {
    tuanId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      options: regionData,
      tuanData: {},
      selectedOptions: [],
      mapCenter: {lng: 116.403963, lat: 39.915111},
      zoom: 15,
    }
  },
  watch: {
    tuanData(newData) {
      this.selectedOptions = [newData.province_code,newData.city_code,newData.area_code];
    }
  },
  mounted() {
    this.getTuanUser();
  },
  methods: {
    /**
     * 获取团长信息
     */
    getTuanUser() {
      const params = { id: this.tuanId, key: this.$store.state.app.activeApp.saa_key };
      getTuanUser(params).then(res => {
        if(res.status === 200){
          this.tuanData = res.data;
          this.mapCenter.lng = this.tuanData.longitude;
          this.mapCenter.lat = this.tuanData.latitude;
        }else{
          this.$message.error(res.message);
        }
      })
    },
    /**
     * 点击地图事件
     */
    getLocationPoint(e) {
      this.tuanData.longitude = e.point.lng;
      this.tuanData.latitude = e.point.lat;
    },
    /**
     * 省市联动
     */
    handleChange (areaCodeList) {
      this.tuanData.province_code = areaCodeList[0];
      this.tuanData.province = CodeToText[areaCodeList[0]];

      this.tuanData.city_code = areaCodeList[1];
      this.tuanData.city = CodeToText[areaCodeList[1]];

      this.tuanData.area_code = areaCodeList[2];
      this.tuanData.area = CodeToText[areaCodeList[2]];
    },
    /**
     * 提交
     */
    submit() {
      console.log(this.tuanData);
      delete this.tuanData.format_create_time;
      delete this.tuanData.format_update_time;
      delete this.tuanData.delete_time;
      delete this.tuanData.province;
      delete this.tuanData.city;
      delete this.tuanData.area;
      delete this.tuanData.money;
      delete this.tuanData.audit_name;
      delete this.tuanData.nickname;
      delete this.tuanData.avatar;
      delete this.tuanData.sex;
      delete this.tuanData.ali;
      delete this.tuanData.pay_name;
      delete this.tuanData.pay_realname;
      delete this.tuanData.pay_number;
      putTuanUser(this.tuanData).then(res => {
        if(res.status === 200){
          this.$emit('success');
          this.$message.success('修改成功！');
        }else{
          this.$message.error(res.message);
        }
      })
    }
  },
}
</script>